<template>
  <div class="bg">
    <div class="map" id="map-container"></div>

    <div class="box">
      <div class="flex">
        <el-input v-model="input" id="tipinput"></el-input>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"
            :size="size"
          />
        </div>
        <el-button @click="search" type="primary">搜索</el-button>
      </div>
      <el-card class="box-card" v-show="showcard">
        <template #header>
          <div class="card-header">
            <div class="userbox">
              <img src="../../img/User.png" alt="" />
            </div>
            <div>
              <p>{{ userobj.name }}</p>
              <p>{{ userobj.id_number }}</p>
            </div>
            &emsp; &emsp; &emsp; &emsp; &emsp;
            <el-button class="button" text>2022-10-10 形程</el-button>
          </div>
        </template>
        <!-- 手风琴折叠面板 -->
        <div class="demo-collapse">
          <el-collapse accordion v-model="activeName">
            <div class="ccolor">
              <el-collapse-item
              :name="index + 1 + ''"
                v-for="(item, index) in userobj.ticket_info"
                :key="index"
              >
                <template #title>
                  <div class="lineh">
                    <h3>
                      {{ item.start }} → {{ item.destination }} &emsp;{{
                        item.train_number
                      }}
                    </h3>

                    <p>
                      {{ item.createTime }}&emsp;至&emsp;{{
                        item.endTime
                      }}
                    </p>
                  </div>
                </template>
                <div>
                  <div class="scard">
                    <div class="top flex">
                      <div class="tleft">
                        <p>{{ item.createTime}}</p>
                        <h1>{{ item.createTime }}</h1>
                        <p>
                          <b>{{ item.start }}</b>
                        </p>
                      </div>
                      <div class="tcenter">————</div>
                      <div class="tright">
                        <p>{{ item.endTime }}</p>
                        <h1>{{ item.endTime }}</h1>
                        <p>
                          <b>{{ item.destination }}</b>
                        </p>
                      </div>
                    </div>
                    <hr />
                    <div class="buttom flex">
                      <div class="bleft">
                        <h3 class="b">{{ userobj.name }}</h3>
                        <p>{{ userobj.id_number }}</p>
                      </div>
                      <div class="bright">
                        <h3>
                          <span class="b">{{ item.seat_class }}</span>
                          <span>￥{{ item.price }}</span>
                        </h3>
                        <p class="b">
                         <img class="kao" src="../../img/靠窗.png" alt=""><span
                            >{{ item.carriage_number }}车厢{{
                              item.seat_number
                            }}号</span
                          >
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </div>
          </el-collapse>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
window._AMapSecurityConfig = {
  securityJsCode: "0bafc51f8c27b41fb8a80c160bd91db1",
  // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
};
import { getInfo } from "../../api/tick";
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, ref ,watch} from "vue";
// import { getHMS, gethms, getYMD } from "../../utils/index";
export default {
  setup() {
    // 搜索框
    const input = ref("");
    const value1 = ref("");
    let showcard = ref(false);
    let userobj = ref({});

    const activeName = ref("0");
    let map = null;
    // 默认轨迹起点
    const startinfo = ref([115.25, 39.26]);
    // 默认轨迹终点
    const endinfo = ref([113.41, 29.58]);
    const userInfo = ref([""]);
    // 获取个人轨迹信息
    getInfo().then((res) => {
      userInfo.value = res.data;
      console.log(userInfo.value);
    });

   // 监听绑定的activeName
   watch(activeName, (newvalue, oldvalue) => {
    console.log(activeName);
       console.log(userobj.value.ticket_info);
       console.log(activeName.value);
      if (activeName.value) {
        startinfo.value =
          userobj.value.ticket_info[
            activeName.value - 1
          ].start_latitude_longitude;
        endinfo.value =
          userobj.value.ticket_info[
            activeName.value - 1
          ].destination_latitude_longitude;
      } else {
        startinfo.value = [];
        endinfo.value = [];
      }
      initMap();
    });
    // 地图初始化
    const initMap = () => {
      AMapLoader.load({
        key: "1bc892c2f9797e3a0cd20229494247b5", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ToolBar", //工具条，控制地图的缩放、平移等
          "AMap.OverView", //鹰眼
          "AMap.Scale", //比例尺，显示当前地图中心的比例尺
          //   "AMap.AutoComplete",
          //   "AMap.PlaceSearch",
          "AMap.Driving",
          //   "AMap.DragRoute",
        ],
      })
        .then((AMap) => {
          map = new AMap.Map("map-container", {
            // 设置地图容器id
            viewMode: "2D", //  是否为3D地图模式
            zoom: 13, // 初始化地图级别
            center: [114.268691, 30.401227], //中心点坐标
            resizeEnable: true,
          });

          var drivingOption = {
            policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
            map,
          };
          // 构造路线导航类
          var driving = new AMap.Driving(drivingOption);
          // 根据起终点经纬度规划驾车导航路线
          var start = new AMap.LngLat(...startinfo.value);
          var end = new AMap.LngLat(...endinfo.value);
          driving.search(start, end, function (status, result) {
            if (status === "complete") {
              console.log("绘制驾车路线完成");
            } else {
              console.log("获取驾车数据失败：" + result);
            }
          });

          //   异步加载插件
          var toolbar = new AMap.ToolBar();
          var OverView = new AMap.OverView();
          var scale = new AMap.Scale();
          map.addControl(toolbar);
          map.addControl(OverView);
          map.addControl(scale);
        })
        .catch((e) => {});
    };

    onMounted(() => {
      initMap();
    });
    // 地图搜索
    const search = () => {
      console.log(input.value);
      let index = userInfo.value.findIndex((item) => item.name === input.value);
      console.log(userobj);
      if (index !== -1) {
        showcard.value = true;
        userobj.value = userInfo.value[index];
        startinfo.value = userInfo.value[index].start_latitude_longitude;
        endinfo.value = userInfo.value[index].destination_latitude_longitude;
      } else {
        showcard.value = false;
        //
      }
    };
    return {
      map,
      input,
      value1,
      userInfo,
      search,
      userobj,
      showcard,
      startinfo,
      endinfo,
      activeName
    };
  },
};
</script>
<style>
.map {
  width: 100%;
  height: 80vh;
}
.box {
  position: fixed;
  top: 130px;
  left: 300px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}
.scard {
  background:#e8f2f5;
  border-radius: 10px;
  padding: 10px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
  margin-top: 10px;
}
.lineh {
  line-height: 20px;
}
.ccolor {
  width: 100%;
 
  margin: 10px;
}
.userbox {
  width: 80px;
  height: 80px;
}
.card-header[data-v-e5e42210] {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flex {
  display: flex;
  justify-content: space-between;
}
h1 {
  font-size: 26px;
  font-weight: 500;
}
.span {
  padding: 3px;
  border: 1px solid #000;
}
.kao{
  width: 24px;height: 12px;
}
</style>
